import React from 'react'
import PropTypes from 'prop-types'
import {

  StyleSheet,
  Text,
  View
} from 'react-native'

import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
const arrowRight = require('@/imgC/userinfo/arrow_black_right.png')
export default class CompanyTouchableOpacity extends React.PureComponent {
  static propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
    placeHolder: PropTypes.string,
    onPress: PropTypes.func,
    params: PropTypes.any,
    last: PropTypes.bool,
    children: PropTypes.node,
    style: PropTypes.object,
    titleStyle: PropTypes.object,
    valueStyle: PropTypes.object,
    urlStyle: PropTypes.object,
    title: PropTypes.string,
    url: PropTypes.number,
    icon: PropTypes.number,
    type: PropTypes.bool,
    ellipsizeMode: PropTypes.string,
    numberOfLines: PropTypes.number,
    isArrowRight: PropTypes.bool
  }

  render() {
    const {
      style, title, value, placeHolder, last, children, type, url, titleStyle, valueStyle, icon, urlStyle, isArrowRight
    } = this.props
    return (
      <CustomButton style={[styles.container, style, last && styles.last]} onPress={this._onPress}>
        <View style={styles.titleView}>
          {icon && <CustomImage style={[styles.icon]} source={icon} />}
          <Text style={[styles.title, titleStyle]}>{title}</Text>
        </View>
        <View style={styles.childrenWrap}>{children}</View>
        {!type && <Text ellipsizeMode='tail' numberOfLines={1} style={[styles.placeHolder, value && styles.value, valueStyle]}>{value || placeHolder}</Text>}
        {!isArrowRight && <CustomImage style={[styles.arrowRight, urlStyle]} source={url || arrowRight} />}
      </CustomButton>
    )
  }

  _onPress = () => {
    const {
      onPress,
      params
    } = this.props
    onPress && onPress(params)
  }
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: ScaleS(76),
    flexDirection: 'row',
    alignItems: 'center'
  },
  titleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    width: ScaleS(22),
    height: ScaleS(22),
    marginRight: ScaleS(12),
    marginTop: ScaleS(-4)
  },
  title: {
    color: '#444444',
    fontSize: ScaleT(17),
    fontWeight: '600'
  },
  last: {
    borderBottomWidth: 0
  },
  childrenWrap: {
    flex: 1,
    flexDirection: 'row-reverse',
    alignItems: 'center'
  },
  placeHolder: {
    fontSize: ScaleT(15),
    color: '#999999',
    textAlign: 'right'
  },
  value: {
    color: '#444444'
  },
  arrowRight: {
    marginLeft: ScaleS(16),
    width: ScaleS(8),
    height: ScaleS(13)
  }
})
